<template>
  <div class='details-page'>
    <div class='header'>
      <div class='img_wrap'>
        <img :src="org.imageUrls ? org.imageUrls : '/static/img/test1.jpg'" alt="" class='img' mode='aspectFit'>
      </div>
      <p class='head_name' v-text='org.name'>
      </p>
    </div>
    <p class='line'></p>
    <div class='toggleBtn_wrap'>
      <span class='btn' :class='{active: !toggleClass}' @click='handletoggleClass(false)'>
        方案
      </span>
      <span class='btn' :class='{active: toggleClass}' @click='handletoggleClass(true)'>
        医生 
      </span>
    </div>
    <div class='content_wrap' v-if='!toggleClass'>
      <text class='title' :selectable='true'>我们的推荐方案</text>
      <div class='text_wrap' :selectable='true'>
        <div class='item_wrap'>
          <text class='content' v-text='content.title'></text>
        </div>
        <div class='item_wrap'>
          <text class='content' v-text='content.analys'></text>
        </div>
        <div class='item_wrap'>
          <text class='content' v-text='content.plan'></text>
        </div>
        <div class='item_wrap'>
          <text class='content' v-text='content.price'></text>
        </div>
      </div>
    </div>
    <div class='doctor_content' v-else>
      <div class='avator_wrap'>
        <img :src="doctorData.iconUrl ? doctorData.iconUrl : '/static/img/test1.jpg'" alt="" class='img'>
        <div class='name_wrap'>
          <span v-text='doctorData.nickname'></span> 
          <img src="/static/img/v.png" alt="img" class='img_v'>
        </div>
      </div>
      <div class='resume'>
        <div class='resume_item_wrap'>
          <p class='name'>
            个人简历
          </p>
          <p class='resume_item' v-text='doctorData.description'></p>
        </div>
      </div>
    </div>
    <!-- <div class='star'>
      关注
    </div> -->
  </div>
</template>

<script>
import resumeItem from '../../components/resume'
export default {
  name: 'Details',
  data () {
    return {
      id: '', // 当前方案id
      doctorData: {}, // 医生信息
      content: '',  // 方案信息
      org: {}, // 机构信息
      toggleClass: false
    }
  },
  mounted () {
    const data = Object.assign({}, this.$root.$mp.query)
    this.id = data.id
    this.doctorData = JSON.parse(data.doctorData)
    // this.content = JSON.parse(data.content)
    this.content = JSON.parse(data.content)
    this.org = JSON.parse(data.org)
  },
  methods: {
    handletoggleClass (v) {
      if (this.toggleClass === v) return
      this.toggleClass = v
    }
  },
  components: {
    resumeItem
  }
}
</script>

<style scoped lang='less'>
  .details-page{
    padding:20rpx 25rpx;
    .header{
      .img_wrap{
        height:330rpx;
        overflow: hidden;
        text-align: center;
        .img{
          // width:100%;
          height: 100%;
        }
      }
      .head_name{
        margin-top:20rpx;
        font-size:32rpx;
        margin-bottom: 25rpx;
      }
    }
    .line{
      height:20rpx;
      margin:0 -25rpx;
      background: #F0F0F0;
    }
    .toggleBtn_wrap{
      margin-top:34rpx;
      display: flex;
      justify-content: space-between;
      font-size:32rpx;
      font-weight: bold;
      .btn{
        padding-bottom:20rpx;
      }
      .active{
        border-bottom: 4rpx solid red;
      }
    }
    .content_wrap{
      margin-top:40rpx;
      margin-bottom: 80rpx;
      .title{
        font-size:42rpx;
        color:#444;
      }
      .text_wrap{
        margin-top:30rpx;
        .item_wrap{
          text-indent:64rpx;
        }
        .content{
          font-size:32rpx;
          color:#555;
          line-height: 1.3;
          text-indent: 2em;
        }
      }
    }
    .doctor_content{
      margin-top:49rpx;
      .avator_wrap{
        display: flex;
        .img{
          border-radius: 6rpx;
          width:90rpx;
          height:90rpx;
        }
        .name_wrap{
          font-size: 32rpx;
          display: flex;
          margin-left:25rpx;
          flex-direction: column;
          justify-content: space-between;
          .img_v{
            width:103rpx;
            height:30rpx;
          }
        }
      }
      .resume_item_wrap{
        .name{
          font-size:32rpx;
          color:#444;
          margin-top:65rpx;
          margin-bottom: 35rpx;
        }
        .resume_item{
          color:#666;
          font-size:30rpx;
          margin-bottom:17rpx;
          text-indent: 64rpx;
        }
      }
    }
    .star{
      position: fixed;
      bottom:0;
      left:0;
      right:0;
      height: 80rpx;
      background: #EE5DC0;
      text-align: center;
      color:#fff;
      line-height: 80rpx;
      font-size:35rpx;
    }
  }
</style>
